<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>vue生命周期</title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div class="container">
		{{msg}}
		<button v-on:click="change">点我更新</button>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'.container',
			data:{
				msg:'hello Vue！'
			},
			methods:{
				change(){
					this.msg='hello vue!!!!!';
				}
			},
			beforeCreate(){
				alert("1.vue实例刚刚创建，未进行数据观测和事件配置");
			},
			created(){
				alert("2.实例创建完成，并进行数据观测和事件配置");
			},
			beforeMount(){
				alert("3.表示模板编译之前，还没挂载");
			},
			mounted(){//表示模板编译之后，已经挂载，此时页面才开始渲染，这之后才能看到页面中的内容
				alert("4.表示模板编译之后");
			},
			beforeUpdate(){
				alert("更新数据之前");
			},
			updated(){
				alert("更新之后");
			},
			beforDestroy(){
				alert("组件销毁之前");
			},
			destroyed(){
				alert("组件销毁");
			}
		});
	</script>
</body>
</html>